<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="ming_bg">
        <div class="main_zz">
            <div class="login_left">
                <div class="title">高效记录生活</div>
                <div class="sub">轻松收集,有效整理</div>
                <img src="/src/assets/login.png">
            </div>
            <div class="login_right">
                <div class="login_logo">
                    <img class="login-icon" src="/src/assets/logo.png">
                    <p class="logo-text">欢迎登录</p>
                </div>
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="loginForm.username" placeholder="用户名">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input :prefix-icon="Lock" type="password" show-password v-model="loginForm.password"
                            placeholder="密码">
                        </el-input>
                    </el-form-item>
                    <div class="flx-row">
                        <el-checkbox style="flex: 1" v-model="loginForm.checked" label="记住密码" size="large" />
                        <span>忘记密码</span>
                    </div>
                </el-form>
                <div class="login-btn">
                    <el-button :icon="CircleClose" round @click="resetForm(loginFormRef)" size="large">重置</el-button>
                    <el-button :icon="UserFilled" round @click="login(loginFormRef)" size="large" type="primary"
                        :loading="loading">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    CircleClose, UserFilled, User, Lock
} from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter'
const stores = useCounterStore()

const loginFormRef = ref();
const loading = ref(false);
const loginForm = reactive({
    username: '',
    password: '',
    checked: true
})
// 重置按钮
const resetForm = (formEl: any) => {
    if (!formEl) return;
    formEl.resetFields();
}

const loginRules = reactive({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
// 登录
const login = () => {
    stores.loginActive(loginForm)
}

</script>

<style scoped lang="scss">
.ming_bg {
    width: 100vw;
    height: 100vh;
    background-image: url('@/assets/bg.png');
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .main_zz {
        width: 96%;
        height: 94%;
        background-color: hsla(0, 0%, 100%, 0.85);
        border-radius: 10px;
        padding: 0 8% 0 50px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .login_left {
            width: 800px;


            .title {
                font-size: 32px;
                font-weight: 400;
                letter-spacing: 0px;
                color: rgba(47, 57, 78, 1);
                text-align: left;
            }

            img {
                width: 735px;
                height: 465px;
            }
        }

        .login_right {
            width: 400px;
            height: 460px;
            padding: 10px 40px 35px 40px;
            border-radius: 10px;
            -webkit-box-shadow: 2px 3px 7px rgb(0 0 0 /20%);
            box-shadow: 2px 3px 7px rgb(0 0 0 /20%);

            .login_logo {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 30px;
                margin-bottom: 30px;

                .login-icon {
                    width: 60px;
                }

                .logo-text {
                    font-weight: bold;
                    font-size: 32px;
                    padding-left: 25px;
                    white-space: nowrap;
                    color: #2d51e6;
                }
            }

            .el-form-item {
                margin-bottom: 20px;
            }

            .flx-row {
                display: flex;
                justify-content: space-between;

                span {
                    font-size: 14px;
                    color: #2d51e6;
                }

                .img {
                    flex: 1;
                    text-align: center;
                }
            }

            .login-btn {
                margin-top: 20px;
                padding-bottom: 20px;
                display: flex;
                justify-content: space-between;
                width: 100%;
                white-space: nowrap;

                .el-button {
                    width: 185px;
                }
            }
        }
    }
}
</style>